<template>
	<view class="modificationPhoneBox">
		<view class="title">
			绑定手机，让你的账号更安全
		</view>
		<view class="bgcWhite padding">
			<view class="height me-fx-row-start-c">
				<view class="widthFont">
					+86
				</view>
				<input type="text" value="" placeholder="请输入手机号" v-model="inputPhone" />
			</view>
			<view class="height me-fx-row-start-c border">
				<view class="widthFont">
					验证码
				</view>
				<input type="text" value="" placeholder="请输入验证码" v-model="inputYzm" />
				<view class="sendYZM" @click="sendYZMBtn" v-if='yzmBtn'>
					{{sendyzmVal}}
				</view>
				<text class="sendYZM" v-else>
					{{yzmConter}}s重新获取
				</text>
			</view>
		</view>

		<view class="sureBtn" @click="sureBtn">
			确认
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputPhone: '',
				inputYzm: '',
				yzmBtn:true,
				sendyzmVal:'发送验证码',
				yzmConter:''
			}
		},
		created() {
		},
		methods: {
			sendYZMBtn(){
				this.getPhoneYzm()
			},
			yzmTime(){
				const TIME_COUNT = 60;
				    if (!this.timer) {
				      this.yzmConter = TIME_COUNT;
				      this.yzmBtn = false;
				      this.timer = setInterval(() => {
				      if (this.yzmConter > 0 && this.yzmConter <= TIME_COUNT) {
				        this.yzmConter--;
				       } else {
				        this.yzmBtn = true;
				        clearInterval(this.timer);
				        this.timer = null;
				       }
				      }, 1000)
				     }
			},
			getPhoneYzm() {
				this.$u.get('/code/modify_mobile').then(res => {
						if (res) {
							console.log(res, 'rrr')
							this.phone = res.data.mobile
							this.yzmTime()
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			sureBtn() {
				if (this.inputPhone == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 1000,
						icon: 'none'
					})
				} else if (this.inputYzm == '') {
					uni.showToast({
						title: '请输入验证码',
						duration: 1000,
						icon: 'none'
					})
				} else {
					let data={
						mobile:this.inputPhone,
						code:this.inputYzm
					}
					this.$u.put('/user/mobile/modify',data).then(res => {
							if (res) {
								console.log(res, 'rrr')
								uni.showToast({
									title: '修改成功',
									duration: 1000,
									icon: 'none'
								})
								setTimeout(()=>{
									uni.navigateTo({
										url:'../indexPage/my'
									})
								},1000)
							}
						})
						.catch((res) => {
							console.log(res.message)
						})
				}

			}
		}
	}
</script>

<style>
	.modificationPhoneBox {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.title {
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 36rpx;
	}

	.bgcWhite {
		background-color: white;
	}

	.height {
		height: 120rpx;
		line-height: 120rpx;
	}

	.widthFont {
		width: 200rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.padding {
		padding: 0 36rpx;
	}

	.border {
		border-top: 1rpx solid #F5F5F5
	}

	.sendYZM {
		width: 154rpx;
		height: 46rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(92, 20, 255, 1);
		border-radius: 23rpx;
		text-align: center;
		line-height: 46rpx;
		font-size: 26rpx;
		color: rgba(107, 42, 254, 1);
	}

	.sureBtn {
		width: 681rpx;
		height: 88rpx;
		background: rgba(92, 20, 255, 1);
		opacity: 0.9;
		border-radius: 44rpx;
		margin: 120rpx auto;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}
</style>
